<template>
  <div class="header">
    <div class="header-1">
          <div>
            <p>还没有课表计划，先去制定个吧~</p>
          </div>
            <div class="nav">
              <ul>
                <ol>
                  <span>学习</span>
                  <br>
                    <span>报告</span>
                </ol>
              </ul>
            </div>

          <router-link to="/kebiao">
          <span class="last">></span>
          </router-link>

          </div>  
        <div class="photo">
          <span><img src="/learning/nv.jpg" alt=""></span>
          <p>把近期学习的课程添加进课表</p>
          <p>设定学习提醒，每天定时定量高效学习</p>
        </div>
        <div class="btn">


         <button @click="fun()">定制课表</button>
            <br>
            <span>什么时课表？</span>
        </div>
    
  </div>
</template>

<script>
import { Dialog } from 'vant';
export default {
  methods:{
    fun(){
      Dialog.confirm({
  // title: '标题',
  message: '你还没有课程，先去选一门',
})
  .then(() => {
    // on confirm
  })
  .catch(() => {
    // on cancel
  });
    }
  }
  
}
 


</script>

<style scoped>
.header{
  width: 100%;
  height:0.66rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* margin-top: 0.7rem; */
   
}
.header .header-1 {
  width: 3.47rem;
  height:0.66rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: auto;
  box-shadow: 0rem 0rem 0.05rem 0rem rgb(165, 163, 163);
}
.header .header-1 .nav ul{
  display: flex;
  align-content: center;
}
.header  .photo{
  width: 100%;
  margin-top: 0.5rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

}
.header .photo span,img{
  width: 2.5rem;
  height: 2rem;
}
.header  .photo p{
  color: #969696;
}
.header .btn{
margin-top: 0.5rem;

}
.header .btn button{
  width: 1rem;
  height: 0.36rem;
  border-radius: 0.5rem;
  background-color: #fff;
  margin-bottom: 0.1rem;
}
.header .btn span{
  color: #969696;

}
</style>